<#import "../layout/common.html" as com> 
<@com.page title="Nghe nhạc" pageId="pageKeeng" data={'css':'keeng/keeng', 'js':'keeng/keeng', 'ver':'a00'}>

<div class="wrap-space">
	<div class="panel panel-default head-tab">
		<div class="panel-heading">
			<ul class="nav nav-tabs" id="keengHomeTab">
				<!-- <li class=""><a href="#keeng-songs" data-toggle="tab">Bài hát</a></li> -->
				<li class=""><a href="#keeng-albums" data-toggle="tabajax" ajax-href="/app/keeng/albums">Albums</a></li>
				<li class="active"><a href="#keeng-album" data-toggle="tab">Play</a></li>
			</ul>
		</div>
		<div class="tab-content" id="keengSongLists">
			<div class="tab-pane " id="keeng-songs">
				<div class="space">Nhạc nonstop mới</div>
				<div class="list-group">
				</div>
			</div>
			<div class="tab-pane" id="keeng-albums">
				<div class="space tab-loading">Loading...</div>
			</div>
			
			<div class="tab-pane active" id="keeng-album">
				<div class="space tab-heading">
					<div>${album.title?html}</div>
					<div>${album.artist}</div>
					<div><span class="btn btn-default play-playlist-button" playlist="/json/keeng/streams/${album.id?html}">Play Album</span></div>
				</div>
				
				<div class="list-group">
				<#list album.songs as song>
					<div class="list-group-item"><a href="/app/keeng/song/${song.id?html}" class="dj-song" target="_player">${song.title?html}</a> - ${song.artist!?html}</div>
				</#list>
				</div>
			</div>
		</div>
	</div>
</div>

</@com.page>